<!-- 首页 -->
<template>
	<view class="home-wrap">
		<!-- <view class="qi_box">
			<view class="qi_top">
				<view>莲湖区</view>
				<view>18℃</view>
			</view>
			<view  class="qi_top">
				<view>晴转多云</view>
				<view>最高18℃--最低2℃</view>
			</view>
		</view> -->
		<!-- <view class="ding">
			<image class="ding_img" mode="aspectFill" src="../../static/images/ddwei.png"></image>
			<view class="d_name">{{city}}</view>
			<view class="d_sou">
				
				<image mode="aspectFill" src="../../static/images/sechc.png"></image>
				<view>搜索你感兴趣的内容</view>
			</view>
		</view> -->
		<!-- <video class="myVideo" autoplay='true'  v-if="listshi[0].file!='https://sucai.bangzuke.com'" :src="listshi[0].file"></video> -->
		<!-- <view class="baimg"> -->
			<!-- <view class="qi_box">
				<view class="qi_top">
					<view>{{city}}</view>
					<view>{{qilists.temperature}}</view>
				</view>
				<view  class="qi_top">
					<view>{{qilists.weather}}</view>
					<view>{{qilists.direct}}</view>
				</view>
			</view> -->
			<!-- <image mode="aspectFill" :src="listshis[0].images_arr[0]"></image> -->
			<!-- <image mode="aspectFill" :src="listshis[0].images_arr[1]"></image> -->
		<!-- </view> -->
		
		<!-- <view class="ti_name">一键救援</view>
		<image class="phone" @click="phones()" :src="listshiss[0].images_arr[0]"></image>
		<view class="ti_name">合作单位</view>
		<scroll-view scroll-x="true" style=" white-space: nowrap; display: flex;width:690rpx;margin-top: 30rpx;">
			<image class="ttimg" v-for="x,y in listss"  :src="x.images"></image>
		</scroll-view> -->
		<!-- <image class="kefus" src="../../static/images/kekefu.png"></image> -->
		 <!-- @click="kefu()" -->
		<!-- <button open-type="contact" >
			
			<image class="kefus"src="../../static/images/kekefuss.png"></image>
		</button> -->
			
		<!-- 空白页 -->
		<!-- #ifdef APP-PLUS -->
		<u-no-network @retry="init"></u-no-network>
		<!-- #endif -->
		<shopro-empty v-if="!hasTemplate" :image="$IMG_URL + '/imgs/empty/template_empty.png'" tipText="暂未找到模板，请前往装修~">
		</shopro-empty>

		<view v-if="isConnected && isRefresh" class="content-box">
			<!-- 导航栏 -->
			<home-head
				v-if="headSwiperList && headSwiperList.length"
				:scrollTop="scrollTop"
				borderRadius="0"
				:navTitle="initShop.name"
				:list="headSwiperList"
			></home-head>
			<view class="ti_name">法务团队</view>
			<!-- <scroll-view scroll-x="true" style=" white-space: nowrap; display: flex;width:690rpx;">
				  <view class="n_he" v-for="x,y in 3">
				  	<view class="t_img">
				  		<image src="../../static/d_img/touxiao .png" mode="aspectFill"></image>
				  	</view>
				  	<image class="b_img" src="../../static/d_img/ditu.png" mode="aspectFill"></image>
				  	<view class="zhi">执业4年</view>
				  	<view class="n_name">马小跳律师</view>
				  	<view class="n_h">合同事务</view>
				  </view>
			</scroll-view> -->
			<!-- <image src="../../static/d_img/phone.png"></image> -->
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :autoplay="true" next-margin='0px' previous-margin="0px" :interval="3000"
					:duration="1000">
					<swiper-item v-for="item,index in lists" @click="next(item)">
			
			
						<view class="boxx">
							<view class="n_he" v-for="x,y in item" @click="xiang(x.id)">
								<view class="t_img">
									<image :src="x.images" mode="aspectFill"></image>
								</view>
								<image class="b_img" src="../../static/images/bbbu.png" mode="aspectFill"></image>
								<view class="zhi">执业{{x.age}}年</view>
								<view class="n_name">{{x.title}}</view>
								<!-- <view class="n_h" v-html="x.content"></view> -->
							</view>
			
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 自定义模块 -->
			<view class="template-box">
				<block v-for="(item, index) in homeTemplate" :key="item.id">
					<!-- 轮播 -->
					<sh-banner
						v-if="item.type === 'banner' && index !== 0"
						:Px="item.content.x"
						:Py="item.content.y"
						:borderRadius="item.content.radius"
						:height="item.content.height"
						:list="item.content.list"
					></sh-banner>

					<!-- 搜索 -->
					<!-- <sh-search v-if="item.type === 'search'"></sh-search> -->

					<!-- 滑动宫格 -->
					<sh-grid-swiper
						v-if="item.type === 'menu'"
						:list="item.content.list"
						:oneRowNum="item.content.style"
					></sh-grid-swiper>

					<!-- 推荐商品 -->
					<sh-hot-goods
						v-if="item.type === 'goods-list' || item.type === 'goods-group'"
						:detail="item.content"
					></sh-hot-goods>
					<!-- 广告魔方 -->
					<sh-adv v-if="item.type === 'adv'" :detail="item.content"></sh-adv>
					<!-- 优惠券 -->
					<!-- <sh-coupon v-if="item.type === 'coupons'" :detail="item.content"></sh-coupon> -->
					<!-- 秒杀-->
					<!-- <sh-seckill v-if="item.type === 'seckill'" :detail="item.content"></sh-seckill> -->
					<!-- 拼团 -->
					<!-- <sh-groupon v-if="item.type === 'groupon'" :detail="item.content"></sh-groupon> -->
					<!-- 富文本 -->
					<!-- <sh-richtext v-if="item.type === 'rich-text'" :richId="item.content.id"></sh-richtext> -->
					<!-- 功能标题 -->
					<sh-title-card
						v-if="item.type === 'title-block'"
						:title="item.content.name"
						:bgImage="item.content.image"
						:titleColor="item.content.color"
					></sh-title-card>
					<!-- 直播 -->
					<!-- #ifdef MP-WEIXIN -->
					<!-- <sh-live v-if="item.type === 'live' && HAS_LIVE" :detail="item.content"></sh-live> -->
					<!-- #endif -->
				</block>
			</view>

			<!-- 分类选项卡 -->
			<sh-category-tabs
				v-if="categoryTabsData && categoryTabsData.category_arr && categoryTabsData.category_arr.length"
				:enable="enable"
				:styleType="categoryTabsData.style"
				:tabsList="categoryTabsData.category_arr"
			></sh-category-tabs>
			<!-- 登录提示 -->
			<shopro-auth-modal></shopro-auth-modal>
			<!-- 悬浮按钮 -->
			<!-- <shopro-float-btn></shopro-float-btn> -->
			<!-- 连续弹窗提醒 -->
			<!-- <shopro-notice-modal v-if="!showPrivacy && isLogin"></shopro-notice-modal> -->
			<!-- 隐私协议 -->
			<!-- #ifdef APP-PLUS -->
			<privacy-modal v-if="initShop && initShop.name" v-model="showPrivacy"></privacy-modal>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="tabbar-hack" style="height: 120rpx; width:100%;"></view>
			<!-- #endif -->
		</view>
		 <gmy-float-touch :imgLists="imgLists" :mainImg="mainImg" @menuClick="floatTouchClick"></gmy-float-touch>
		<!-- <shopro-tabbar></shopro-tabbar> -->
	</view>
</template>

<script>
	import shBanner from './components/sh-banner.vue';
	import shGridSwiper from './components/sh-grid-swiper.vue';
	import shHotGoods from './components/sh-hot-goods.vue';
	import shAdv from './components/sh-adv.vue';
	import shCoupon from './components/sh-coupon.vue';
	import shSeckill from './components/sh-seckill.vue';
	import shGroupon from './components/sh-groupon.vue';
	import shRichtext from './components/sh-richtext.vue';
	import shTitleCard from './components/sh-title-card.vue';
	import shSearch from './components/sh-search.vue';
	import shCategoryTabs from './components/sh-category-tabs.vue';
	import gmyFloatTouch from "@/components/gmy-float-touch/gmy-float-touch.vue"  

	import privacyModal from './index/privacy-modal.vue';
	import homeHead from './index/home-head.vue';

	// #ifdef MP-WEIXIN
	import {
		HAS_LIVE
	} from '@/env';
	import shLive from './components/sh-live.vue';
	// #endif

	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		components: {
			shBanner,
			shGridSwiper,
			shGroupon,
			shHotGoods,
			shAdv,
			shCoupon,
			shSeckill,
			shRichtext,
			shTitleCard,
			shSearch,
			shCategoryTabs,

			privacyModal,
			homeHead,
			gmyFloatTouch,

			// #ifdef MP-WEIXIN
			shLive
			// #endif
		},
		data() {
			return {
				// #ifdef MP-WEIXIN
				HAS_LIVE: HAS_LIVE,
				// #endif
				isRefresh: true,


				enable: false, //是否开启吸顶。
				isConnected: true, //是否有网
				showPrivacy: false, //协议
				scrollTop: 0,
				lists: '',
				listss: '',
				listshi: '',
				listshis: '',
				listshiss: '',
				phone: '',
				city: '',
				latitude: '',
				longitude: '',
				scrollTop_dd:'',
				qilists:'',
				mainImg:'../../static/images/kekefuss.png',
				imgLists:["../../static/images/kekefuss.png","../../static/images/kekefuss.png","../../static/images/kekefuss.png","../../static/images/kekefuss.png","../../static/images/kekefuss.png"],

			};
		},
		computed: {
			...mapGetters(['initShop', 'homeTemplate', 'hasTemplate', 'isLogin']),
			// 头部模块数据
			headSwiperList() {
				if (this.homeTemplate?.length) {
					return this.homeTemplate[0]?.content?.list;
				}
			},
			// 分类选项卡数据
			categoryTabsData() {
				if (this.homeTemplate?.length) {
					return this.homeTemplate[this.homeTemplate.length - 1]?.content;
				}
			}
		},
		onPullDownRefresh() {
			this.init();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onShow() {
			// if (uni.getStorageSync('user_location_info')) {
			// 	//2是区级
			// 	this.city = uni.getStorageSync('user_location_info').address[2];
			// 	//保存定位信息
			// 	this.latitude = uni.getStorageSync('user_location_info').latitude;
			// 	this.longitude = uni.getStorageSync('user_location_info').longitude;
			// } else {
			// 	//vuex中不存在地址数据--进行地址信息请求
			// 	this.getAuthorizeInfo();
			// 	this.getLocation()
			// }
			// uni.chooseLocation({
			// 	success: function (res) {
			// 		console.log('位置名称：' + res.name);
			// 		console.log('详细地址：' + res.address);
			// 		console.log('纬度：' + res.latitude);
			// 		console.log('经度：' + res.longitude);
			// 	}
			// });
			
			this.lvshi()
			this.lvshis()
			this.lvshis_s()
			this.lvshis_ss()
			this.lvshis_sss()
			let that = this;
			this.enable = true;
			this.isLogin && this.getCartList();
			// 网络变化检测
			uni.onNetworkStatusChange(res => {
				this.isConnected = res.isConnected;
				res.isConnected && this.init();
			});
		},
		onHide() {
			this.enable = false;
		},
		onLoad() {
			// this.getLocationInfo()
			// #ifdef APP-VUE
			// plus.runtime.disagreePrivacy();
			console.log(plus.runtime.isAgreePrivacy(), 1111111111);
			// app隐私协议弹窗
			if (!plus.runtime.isAgreePrivacy()) {
				this.showPrivacy = true;
				this.showNoticeModal = false;
			}
			// #endif
		},
		methods: {
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			xiang(id){
				
				this.jump('/pages/index/lv_xiangqing', {
					goodsList: '',
					from: id,
				});
				
			},
			kefu(){
				uni.navigateTo({
					url:'/pages/public/chat/index'
				})
			},
			// 位置授权
			getAuthorizeInfo() {
				const that = this;
				uni.authorize({
					scope: 'scope.userLocation',
					success() { // 允许授权
						that.getLocationInfo();
					},
					fail() { // 拒绝授权
						that.openConfirm();
						// console.log("你拒绝了授权，无法获得周边信息")
					}
				})
			},
			// 获取地理位置
			getLocationInfo() {
				uni.getLocation({
					type: 'wgs84',
					success:  res =>{
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						this.restLocation(res.latitude, res.longitude);
					}
				});
			},
			// 再次获取授权
			// 当用户第一次拒绝后再次请求授权
			openConfirm() {
				uni.showModal({
					title: '请求授权当前位置',
					content: '需要获取您的地理位置，请确认授权',
					success: (res) => {
						if (res.confirm) {
							uni.openSetting(); // 打开地图权限设置
						} else if (res.cancel) {
							uni.showToast({
								title: '你拒绝了授权，无法获得周边信息',
								icon: 'none',
								duration: 1000
							})
						}
					}
				});
			},
		
			        //逆地理编码
			        restLocation(latitude, longitude) {
			            const ajaxUrl = 'https://restapi.amap.com/v3/geocode/regeo?key=f0ed1bf4fea7a5b6cf52780bd5fb846a&location=' + longitude + ',' + latitude + '&extensions=all&batch=false';
			            uni.request({
			                url: ajaxUrl,
			                method: 'GET',
			                success: res => {
			                    this.nearbyAddress = [];
			                    const {
			                        data: { regeocode }
			                    } = res;
								console.log(res.data.regeocode.addressComponent,"kkkkk")
			                    this.city = res.data.regeocode.addressComponent.city;
								this.qixinag()
			                }
			            });
			        },
			...mapActions(['appInit', 'getTemplate', 'getCartList']),
			// 初始化
			phones(){
			
			let 	that=this
					console.log(that.scrollTop_dd,'666')
				uni.makePhoneCall({
					phoneNumber: that.scrollTop_dd //仅为示例
				});
			},
			init() {
				this.isRefresh = false;
				return Promise.all([this.getTemplate()]).then(() => {
					uni.stopPullDownRefresh();
					this.isRefresh = true;
				});
			},
			qixinag() {
				this.$http('addons.alarmcitys', {
					citys: this.city,
				}).then(res => {
					console.log(res.data, "气象台")
					if (res.code === 1) {
						this.qilists = res.data.result.future[0]
					}
				});
			},
			lvshi() {
				this.$http('addons.article_lawyer', {
					page: 1,
				}).then(res => {
					console.log(res.data, "律师")
					if (res.code === 1) {
						this.lists = res.data
					}
				});
			},
			lvshis() {
				this.$http('addons.article_partner', {
					page: 2,
				}).then(res => {
					console.log(res.data, "合作")
					if (res.code === 1) {
						this.listss = res.data
					}
				});
			},
			lvshis_s() {
				this.$http('addons.article_banner', {
					id: 5,
				}).then(res => {
					console.log(res.data[0].file, "视频")
					if (res.code === 1) {
						this.listshi = res.data
					}
				});
			},
			lvshis_ss() {
				this.$http('addons.article_banner', {
					id: 6,
				}).then(res => {
					console.log(res, "导航")
					if (res.code === 1) {
						this.listshis = res.data
					}
				});
			},
			lvshis_sss() {
				this.$http('addons.article_banner', {
					id: 7,
				}).then(res => {
					console.log(res, "呼救")
					if (res.code === 1) {
						this.listshiss = res.data
						this.scrollTop_dd = res.data[0].phone
						console.log(this.scrollTop_dd,"电话66")
					}
				});
			}
			// lvshis_s() {
			// 	this.$http('addons.article_banner', {
			// 		id:5,
			// 	}).then(res => {
			// 	    console.log(res,"视频")
			// 		if (res.code === 1) {
			// 	        this.listshi=res.data
			// 		}
			// 	});
			// }
			// lvshis_s() {
			// 	this.$http('addons.article_banner', {
			// 		id:5,
			// 	}).then(res => {
			// 	    console.log(res,"视频")
			// 		if (res.code === 1) {
			// 	        this.listshi=res.data
			// 		}
			// 	});
			// }
		}
	};
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss">
	.home-wrap {
		padding: 30rpx;
	}

	.ding {
		display: flex;
		align-items: center;

		.ding_img {
			width: 52rpx;
			height: 52rpx;
		}

		.d_name {
			margin-left: 10rpx;
			margin-right: 40rpx;
			font-size: 34rpx;
			font-family: Microsoft YaHei-Light, Microsoft YaHei;
			font-weight: 300;
			color: #333333;
		}

		.d_sou {
			display: flex;
			align-items: center;
			width: 480rpx;
			padding: 10rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			box-shadow: 0px 20rpx 40rpx 0px rgba(0, 0, 0, 0.1);

			image {
				width: 40rpx;
				height: 40rpx;
			}

			view {
				margin-left: 20rpx;
				font-size: 22rpx;
				font-family: Microsoft YaHei-Light, Microsoft YaHei;
				font-weight: 300;
				color: #999999;
			}
		}
	}

	.myVideo {
		margin-top: 26rpx;
		width: 100%;
		height: 328rpx;
	}

	.baimg {
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		image {
			width: 336rpx;
			height: 136rpx;
			border-radius: 16rpx;
		}
	}

	.ti_name {

		margin-top: 20rpx;
		font-size: 30rpx;
		font-family: Microsoft YaHei-Bold, Microsoft YaHei;
		font-weight: bold;
		color: #333333;
	}

	.uni-margin-wrap {
		margin-top: 20rpx;
		width: 100%;
		// margin-left: 6rpx;
		height: 300rpx;
		overflow: hidden;

		.swiper {
			width: 100%;
			height: 100%;

			swiper-item {
				width: 100%;
				height: 100%;
				// padding: 10rpx;
				box-sizing: border-box;

				// 			image {
				// 				width: 580rpx;
				// 				height: 620rpx;
				// 				border-radius: 20rpx;
				// 			}

				.boxx {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 690rpx;

					.n_he {
						width: 212rpx;
						height: 272rpx;
						// line-height: 272rpx;
						text-align: center;

						// border: 2rpx solid #707070;
						.t_img {
							margin: auto;
							margin-top: 20rpx;
							width: 172rpx;
							height: 172rpx;
							background: #FFFFFF;
							opacity: 1;
							// border: 2rpx solid #707070;
							border-radius: 50%;

							image {
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}

						.b_img {
							position: relative;
							top: -30rpx;
							width: 186rxp;
							height: 44rpx;
						}

						.zhi {
							position: relative;
							top: -70rpx;
							font-size: 18rpx;
							font-family: Microsoft YaHei-Regular, Microsoft YaHei;
							font-weight: 400;
							color: #745700;

						}

						.n_name {
							margin-top: -50rpx;
							font-size: 30rpx;
							font-family: Microsoft YaHei-Regular, Microsoft YaHei;
							font-weight: 400;
							color: #333333;
						}
					}

				}

				.b_top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 34rpx;
					color: #979797;
				}

				.bott {
					// margin-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 32rpx;
					color: #00d18b;
				}

				.n_h {
					margin-top: 10rpx;
					font-size: 22rpx;
					font-family: Microsoft YaHei-Regular, Microsoft YaHei;
					font-weight: 400;
					color: #999999;
				}
			}
		}
	}

	.phone {
		margin-top: 20rpx;
		width: 100%;
		height: 240rpx;
		background: #FFFFFF;
		// border-radius:20%;
		// opacity: 1;
	}

	.ttimg {
		// display: block;
		margin-right: 17rpx;
		width: 156rpx;
		height: 156rpx;
		border-radius: 20rpx;
	}

	.kefus {
		width: 108rpx;
		height: 108rpx;
		position: fixed;
		top: 550rpx;
		right: 0;
	}

	.n_he {
		margin-right: 30rpx;
		width: 212rpx;
		height: 272rpx;
		// line-height: 272rpx;
		display: inline-block;

		text-align: center;

		// border: 2rpx solid #707070;
		.t_img {
			margin: auto;
			margin-top: 20rpx;
			width: 132rpx;
			height: 132rpx;
			background: #FFFFFF;
			opacity: 1;
			border: 2rpx solid #707070;
			border-radius: 50%;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.b_img {
			position: relative;
			top: -30rpx;
			width: 186rxp;
			height: 44rpx;
		}


	}

	.zhi {
		position: relative;
		top: -70rpx;
		font-size: 18rpx;
		font-family: Microsoft YaHei-Regular, Microsoft YaHei;
		font-weight: 400;
		color: #745700;

	}

	.n_name {
		margin-top: -50rpx;
		font-size: 30rpx;
		font-family: Microsoft YaHei-Regular, Microsoft YaHei;
		font-weight: 400;
		color: #333333;
	}

	.n_h {
		margin-top: 10rpx;
		font-size: 22rpx;
		font-family: Microsoft YaHei-Regular, Microsoft YaHei;
		font-weight: 400;
		color: #999999;
	}
	.qi_box{
		width: 100%;
		height: 136rpx;
		background-image: linear-gradient( #14508E, #ffffff);/* 默认方向自下向上 */
		border-radius: 20rpx;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		color: #fff;
		font-size: 24rpx;
		.qi_top{
			margin-bottom: 25rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
</style>
